<template>
	<view class="video_play">
		<image :src="videoObj.img"></image>
		<!-- 工具栏 开始 -->
		<view class="video_tool">
			<!-- 动态的添加class 使用数组的方式 -->
			<view :class="['iconfont',isJinYin?'icon-jingyin':'icon-shengyin']" @click="ClickJinYin"></view>
			<!-- #ifdef MP-WEIXIN -->
			<view class="iconfont icon-zhuanfa">
				<button open-type="share"></button>
			</view>
			<!-- #endif -->
		</view>
		<!-- 工具栏 结束 -->

		<!-- 视频 开始 -->
		<view class="video_wrap">
			<video :src="videoObj.video" objectFit="fill" :muted="isJinYin"></video>
		</view>
		<!-- 视频 结束 -->

		<!-- 下载 开始 -->
		<view class="download">
			<view class="download_btn" @click="ClickDownload">下载高清</view>
		</view>
		<!-- 下载 结束 -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				videoObj: {},
				// 默认非静音
				isJinYin: false
			}
		},
		methods: {
			ClickJinYin() {
				this.isJinYin = !this.isJinYin
			},
			async ClickDownload() {
				// #ifndef H5
				await uni.showLoading({
					title: "正在下载"
				});
				//1将远程文件下载到小程序内存中
				const result = await uni.downloadFile({
					url: this.videoObj.video
				})
				console.log(result);
				const {
					tempFilePath
				} = result[1];
				//2将内存中的文件下载到本地上
				const result2 = await uni.saveVideoToPhotosAlbum({filePath: tempFilePath})
				console.log(result2);
				// 等待是否保存到相册执行完后再关闭
				uni.hideLoading();
				if (result2.length === 1) {
					// 3 根据判断提示用户下载取消
					uni.showToast({
						title: "取消下载",
						icon: "error"
					})
				} else if (result2.length === 2) {
					uni.showToast({
						title: "下载成功"
					})
				}
				// #endif
				
				// #ifdef H5
				// let dload = document.createElement("a");
				
				//   dload.download = '';// 设置下载的文件名，默认是'下载'
				
				//   dload.href = this.videoObj.video;
				
				//   document.body.appendChild(dload);
				
				//   dload.click();
				
				//   dload.remove(); // 下载之后把创建的元素删除
				var src = this.videoObj.video;
				var iframe = document.createElement('iframe');
				iframe.style.display = 'none';
				iframe.src = "javascript: '<script>location.href=\"" + src + "\"<\/script>'";
				document.getElementsByTagName('body')[0].appendChild(iframe);
				// #endif
				 
			}
		},
		onLoad() {
			// console.log(getApp().globalData.video);
			this.videoObj = getApp().globalData.video;
		}
	}
</script>

<style lang="scss" scoped>
	.video_play {
		position: relative;
		image {
			position: absolute;
			width: 100%;
			height: 100vh;
			// 防止挡住其他的元素
			z-index: -1;
			// css3滤镜属性
			filter: blur(20px);
		}

		.video_tool {
			display: flex;
			height: 80rpx;
			justify-content: flex-end;

			.iconfont {
				width: 80rpx;
				color: #FFFFFF;
				font-size: 50rpx;
				border-radius: 40rpx;
				background-color: rgba(0, 0, 0, .2);
				display: flex;
				align-items: center;
				justify-content: center;
				margin-right: 20rpx;
			}

			.icon-zhuanfa {
				position: relative;

				button {
					position: absolute;
					width: 100%;
					height: 100%;
					// 透明度为0
					opacity: 0;
				}
			}
		}

		.video_wrap {
			display: flex;
			justify-content: center;

			video {
				width: 360rpx;
				height: 600rpx;
			}
		}

		.download {
			display: flex;
			justify-content: center;

			margin-top: 30rpx;

			.download_btn {
				width: 360rpx;
				height: 80rpx;
				border-radius: 40rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				color: #FFFFFF;
				border: 3rpx solid #FFFFFF;
				// 背景颜色 渐变
				background-color: rgba(0, 0, 0, .3);
			}
		}
	}
</style>
